<%@ include file="../common/top.jsp"%>

<div class="crumb">
    <div class="w">
        <div class="crumb-content">
            <a href="main" class="link">MyStore</a>
            <span>></span>
            <span class="link-text">newOrder</span>
        </div>
    </div>
</div>

<div class="w">
    <div id="newOrder">
        <div class="panel">

<%--            <form action="newOrder?username=${sessionScope.loginAccount.username}" method="post" id="">--%>
            <form action="" method="post" id="newOrderForm">
                <table class="order-table">
                    <tr>
                        <th colspan=2 align="center">Payment Details</th>
                    </tr>
                    <tr>
                        <td>Card Type:</td>
                        <td>
                            <select name="cardType">
                                <!--{sessionScope.loginAccount.languagePreference.equals("english")?'selected':''-->
                                <option value="Visa">Visa</option>
                                <option value="MasterCard">MasterCard</option>
                                <option value="American Express">American Express</option>
                                <option value="Wechat">Wechat</option>
                                <option value="Alipay">Alipay</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Card Number:</td>
                        <td>
                            <input type="text" name="creditCard" value="999 9999 9999 9999">
                            * Use a fake number!
                        </td>
                    </tr>
                    <tr>
                        <td>Expiry Date (MM/YYYY):</td>
                        <td>
                            <input type="text" name="expiryDate" value="12/03">
                        </td>
                    </tr>
                    <tr>
                        <th colspan=2 align="center">Billing Address</th>
                    </tr>

                    <tr>
                        <td>First name:</td>
                        <td>
                            <input type="text" name="billToFirstName" value="${sessionScope.loginAccount.firstName}">
                        </td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td>
                            <input type="text" name="billToLastName" value="${sessionScope.loginAccount.lastName}">
                        </td>
                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td>
                            <input type="text" size="40" name="billAddress1" value="${sessionScope.loginAccount.address1}">
                        </td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td>
                            <input type="text" size="40" name="billAddress2" value="${sessionScope.loginAccount.address2}">
                        </td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td>
                            <input type="text" name="billCity" value="${sessionScope.loginAccount.city}">
                        </td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td>
                            <input type="text" size="4" name="billState" value="${sessionScope.loginAccount.state}">
                        </td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td>
                            <input type="text" size="10" name="billZip" value="${sessionScope.loginAccount.zip}">
                        </td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td>
                            <input type="text" size="15" name="billCountry" value="${sessionScope.loginAccount.country}">
                        </td>
                    </tr>

                    <tr>
                        <td colspan=2>
                            <input type="checkbox" name="shippingAddressRequired">
                            Ship to different address...</td>
                    </tr>

                </table>
                <div style="text-align: center;">
                    <input type="submit" name="newOrder" value="Continue" id="newOrderBtn">
                </div>

            </form>
        </div>
    </div>

    <div id="shippingInform">
        <div class="panel">
            <form action="" method="post" id="shippingAddressForm">
                <table class="order-table">
                    <tr>
                        <th colspan=2>Shipping Address</th>
                    </tr>

                    <tr>
                        <td>First name:</td>
                        <td>
                            <input type="text" name="shipToFirstName" value="${sessionScope.loginAccount.firstName}">
                        </td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td>
                            <input type="text" name="shipToLastName" value="${sessionScope.loginAccount.lastName}">
                        </td>
                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td>
                            <input type="text" size="40" name="shipAddress1" value="${sessionScope.loginAccount.address1}">
                        </td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td>
                            <input type="text" size="40" name="shipAddress2" value="${sessionScope.loginAccount.address2}">
                        </td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td>
                            <input type="text" name="shipCity" value="${sessionScope.loginAccount.city}">
                        </td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td>
                            <input type="text" name="shipState" value="${sessionScope.loginAccount.state}">
                        </td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td>
                            <input type="text" size="10" name="shipZip" value="${sessionScope.loginAccount.zip}">
                        </td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td>
                            <input type="text" size="15" name="shipCountry" value="${sessionScope.loginAccount.country}">
                        </td>
                    </tr>
                </table>
                <div style="text-align: center;">
                    <input type="submit" name="newOrder" value="Continue">
                </div>
            </form>
        </div>
    </div>

    <div id="confirmOrder">
        <div class="panel">
            <div class="text" style="text-align: center">
                Please confirm the information below and then
                press continue...
            </div>
            <table class="order-table">
                <tr>
                    <th align="center" colspan="2"><font size="4"><b>Order</b></font>
                        <br />
                        <font size="3"><b> <fmt:formatDate
                                value="${sessionScope.currentOrder.orderDate}" pattern="yyyy/MM/dd hh:mm:ss" /></b></font>
                    </th>
                </tr>

                <tr>
                    <th colspan="2">Billing Address</th>
                </tr>
                <tr>
                    <td>First name:</td>
                    <td><c:out value="${sessionScope.currentOrder.billToFirstName}" /></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><c:out value="${sessionScope.currentOrder.billToLastName}" /></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><c:out value="${sessionScope.currentOrder.billAddress1}" /></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><c:out value="${sessionScope.currentOrder.billAddress2}" /></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><c:out value="${sessionScope.currentOrder.billCity}" /></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><c:out value="${sessionScope.currentOrder.billState}" /></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><c:out value="${sessionScope.currentOrder.billZip}" /></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><c:out value="${sessionScope.currentOrder.billCountry}" /></td>
                </tr>
                <tr>
                    <th colspan="2">Shipping Address</th>
                </tr>
                <tr>
                    <td>First name:</td>
                    <td><c:out value="${sessionScope.currentOrder.shipToFirstName}" /></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><c:out value="${sessionScope.currentOrder.shipToLastName}" /></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><c:out value="${sessionScope.currentOrder.shipAddress1}" /></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><c:out value="${sessionScope.currentOrder.shipAddress2}" /></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><c:out value="${sessionScope.currentOrder.shipCity}" /></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><c:out value="${sessionScope.currentOrder.shipState}" /></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><c:out value="${sessionScope.currentOrder.shipZip}" /></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><c:out value="${sessionScope.currentOrder.shipCountry}" /></td>
                </tr>

            </table>
            <div style="text-align: center">
                <a href="finalOrderForm" class="Button">Confirm</a>
            </div>
        </div>
    </div>


<%--    <div id="ViewOrder">--%>
<%--        <div class="panel">--%>
<%--            <table>--%>
<%--                <tr>--%>
<%--                    <th align="center" colspan="2">Order #${sessionScope.currentOrder.orderId}--%>
<%--                        <fmt:formatDate value="${sessionScope.currentOrder.orderDate}"--%>
<%--                                        pattern="yyyy/MM/dd hh:mm:ss" /></th>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <th colspan="2">Payment Details</th>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>Card Type:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.cardType}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>Card Number:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.creditCard}" /> * Fake--%>
<%--                        number!</td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>Expiry Date (MM/YYYY):</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.expiryDate}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <th colspan="2">Billing Address</th>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>First name:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.billToFirstName}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>Last name:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.billToLastName}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>Address 1:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.billAddress1}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>Address 2:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.billAddress2}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>City:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.billCity}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>State:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.billState}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>Zip:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.billZip}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>Country:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.billCountry}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <th colspan="2">Shipping Address</th>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>First name:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.shipToFirstName}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>Last name:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.shipToLastName}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>Address 1:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.shipAddress1}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>Address 2:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.shipAddress2}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>City:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.shipCity}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>State:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.shipState}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>Zip:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.shipZip}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>Country:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.shipCountry}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>Courier:</td>--%>
<%--                    <td><c:out value="${sessionScope.currentOrder.courier}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td colspan="1">Status:</td>--%>
<%--                    <td> <c:out value="${sessionScope.currentOrder.status}" /></td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td colspan="2">--%>
<%--                        <table>--%>
<%--                            <tr>--%>
<%--                                <th>Item ID</th>--%>
<%--                                <th>Description</th>--%>
<%--                                <th>Quantity</th>--%>
<%--                                <th>Price</th>--%>
<%--                                <th>Total Cost</th>--%>
<%--                            </tr>--%>
<%--                            <c:forEach var="lineItem" items="${sessionScope.currentOrder.lineItems}">--%>
<%--                                <tr>--%>
<%--                                    <td>--%>

<%--                                        <a href="itemForm?itemId=${lineItem.item.itemId}">${lineItem.item.itemId}</a>--%>

<%--                                    </td>--%>
<%--                                    <td>--%>
<%--                                        <c:if test="${lineItem.item != null}">--%>
<%--                                            ${lineItem.item.attribute1}--%>
<%--                                            ${lineItem.item.attribute2}--%>
<%--                                            ${lineItem.item.attribute3}--%>
<%--                                            ${lineItem.item.attribute4}--%>
<%--                                            ${lineItem.item.attribute5}--%>
<%--                                            ${lineItem.item.product.name}--%>
<%--                                        </c:if>--%>
<%--                                        <c:if test="${lineItem.item == null}">--%>
<%--                                            <i>{description unavailable}</i>--%>
<%--                                        </c:if>--%>
<%--                                    </td>--%>

<%--                                    <td>${lineItem.quantity}</td>--%>
<%--                                    <td><fmt:formatNumber value="${lineItem.unitPrice}"--%>
<%--                                                          pattern="$#,##0.00" /></td>--%>
<%--                                    <td><fmt:formatNumber value="${lineItem.total}"--%>
<%--                                                          pattern="$#,##0.00" /></td>--%>
<%--                                </tr>--%>
<%--                            </c:forEach>--%>
<%--                            <tr>--%>
<%--                                <th colspan="5">Total: <fmt:formatNumber--%>
<%--                                        value="${sessionScope.currentOrder.totalPrice}" pattern="$#,##0.00" /></th>--%>
<%--                            </tr>--%>
<%--                        </table>--%>
<%--                    </td>--%>
<%--                </tr>--%>

<%--            </table>--%>
<%--        </div>--%>
<%--    </div>--%>
</div>

<script src="js/order.js"></script>

<%@ include file="../common/bottom.jsp"%>